<template>
    <div class="table-with-pagination">
        <!-- 表格主体 -->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%; margin-bottom: 5px;" :border="border"
            :row-style="rowStyle">
            <!-- 动态渲染表格列 -->
            <template v-for="column in columns" :key="column.prop || column.label">
                <el-table-column :fixed="column.fixed" :prop="column.prop" :label="column.label" :width="column.width"
                    :show-overflow-tooltip="column.showOverflowTooltip || false">
                    <!-- 自定义列模板（如状态格式化、操作列） -->
                    <template #default="scope" v-if="column.slot">
                        <slot :name="column.slot" :row="scope.row" :$index="scope.$index" />
                    </template>
                </el-table-column>
            </template>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination background layout="->, total, sizes, prev, pager, next, jumper" :current-page="currentPage"
            :page-sizes="pageSizes" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"
            @size-change="handleSizeChange" class="pagination" />
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义组件接收的Props
const props = defineProps({
    // 表格数据
    tableData: {
        type: Array,
        required: true,
        default: () => []
    },
    // 表格列配置
    columns: {
        type: Array,
        required: true,
        default: () => []
    },
    // 总条数
    total: {
        type: Number,
        required: true,
        default: 0
    },
    // 当前页码
    currentPage: {
        type: Number,
        required: true,
        default: 1
    },
    // 每页条数
    pageSize: {
        type: Number,
        required: true,
        default: 10
    },
    // 页大小选项
    pageSizes: {
        type: Array,
        default: () => [10, 20, 30, 40, 50]
    },
    // 表格高度
    tableHeight: {
        type: [Number, String],
        default: 460
    },
    // 是否显示边框
    border: {
        type: Boolean,
        default: true
    },
    // 行样式
    rowStyle: {
        type: Object,
        default: () => ({ position: 'relative' })
    }
})

// 定义组件触发的事件
const emit = defineEmits([
    'size-change', // 页大小变化
    'current-change' // 页码变化
])

// 页大小变化事件
const handleSizeChange = (val) => {
    emit('size-change', val)
}

// 页码变化事件
const handleCurrentChange = (val) => {
    emit('current-change', val)
}
</script>

<style scoped>
.pagination {
    text-align: right;
    margin-top: 15px;
}
</style>